<!DOCTYPE html PUBLIC "-/s/W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
	<head>
		<title>展示</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/three.css" />
	</head>
	<body>
		<div id="em">
			<!-- <div class="title"><span class="dian"></span>智慧工厂3D可视化</div> -->
			<div id="info">
				<div class="loading" v-if="!showLeft">
					<div class="loader"></div>
					<div class="loading-text" v-html="`3D模型正在加载中...(${percentage})`"></div>
				</div>
			</div>

		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/three/three.min.js"></script>
		<script src="./js/three/EffectComposer.js"></script>
		<script src="./js/three/CopyShader.js"></script>
		<script src="./js/three/FXAAShader.js"></script>
		<script src="./js/three/OutlinePass.js"></script>
		<script src="./js/three/RenderPass.js"></script>
		<script src="./js/three/ShaderPass.js"></script>
		<script src="./js/three/loaders/STLLoader.js"></script>
		<script src="./js/three/Detector.js"></script>
		<script src="./js/three/controls/OrbitControls.js"></script>
		<script src="./js/three/libs/stats.min.js"></script>
		<script src="./js/md5.js"></script>
		<!-- 引入axios -->
		<script src="./js/axios.js"></script>
		<script>
			if (!Detector.webgl) Detector.addGetWebGLMessage();
			// var container = document.createElement( 'div' );
			var container;
			var times;
			var stats = new Stats();
			var raycaster = new THREE.Raycaster()
			var mouse = new THREE.Vector2()
			var group = new THREE.Group();
			var loader = new THREE.STLLoader();
			var daColor, previous = null,
				cnt = 0;
			var camera, cameraTarget, scene, renderer, composer;
			var overall = [],
				clickArr = [];
			let AllLineArr = [],
				line, lineW1 = 0,
				lineW2 = 0;
			let tusiArrIndex = [];
			let tusiAnimInterval = null;
			let guogangParam = {};
			var width = window.innerWidth;
			var height = window.innerHeight;
			var app = new Vue({
				el: '#em',
				data: {
					dataJson: [],
					showDataJson: [],
					unitId: '',
					showLeft: false,
					url: '',
					imgUrl: '',
					percentage: '0%',
					clickIndex: null,
					desc: '',
					typeId: '',
					lineId: '',
					typeId: '',
					clickTimetype: false,
					t: null,
					guogangAni: false,
				},
				created() {
					this.url = this.getParamValue('url');
					this.imgUrl = this.getParamValue('imgUrl');
					this.lineId = this.getParamValue('lineId');
					this.typeId = this.getParamValue('typeId');
					this.getDataOrder()
				},
				mounted() {
					window.setView = this.setView;
					this.getGuogangParam();
					this.t = setInterval(this.autoFresh, 7000);
					window.addEventListener('message', (ev) => {
						// 当我们是父子窗口进行消息传递时，可以使用此判断，只接受父窗口传递来的消息,
						if (ev.source !== window.parent) return;
						var data = ev.data;
						//离开单体，取消高亮
						if (data.type == 2) {
							this.setHighlight(0, 1, 0);
						} else {
							for (let i in this.showDataJson) {
								let item = this.showDataJson[i];
								if (data.name == item.name) {
									this.setHighlight(i, 1, item.unitId);
									break;
								}
							}
						}
					}, false);
				},
				beforeDestroy() {
					clearInterval(this.t);
					tusiAnimInterval = null;
					clearInterval(tusiAnimInterval);
					tusiArrIndex = [];
				},
				methods: {
					getGuogangParam() {
						let _this = this;
						let url = _this.url + '/backend-api/app/model/line/point';
						let header2 = {
							"Content-Type": 'application/x-www-form-urlencoded'
						}
						axios({
							headers: header2,
							method: 'get',
							url: url,
							params: {
								typeId: _this.typeId
							}
						}).then(function(response) {
							if (response.data.code === 1000) {
								guogangParam = response.data.data;
							}
						}).catch(function(error) {
							// plus.nativeUI.toast("加载模型失败")
						})
					},
					getSelectedColor() {
						let _this = this;
						let url = _this.url + '/base-api/config/get?conf=COLOR_MODEL_FOCUS';
						let token = this.getParamValue('token')
						let header2 = {
							"Content-Type": 'application/x-www-form-urlencoded'
						}
						axios({
							headers: header2,
							method: 'get',
							url: url
						}).then(function(response) {
							if (response.data.code === 1000) {}
						}).catch(function(error) {
							// plus.nativeUI.toast("加载模型失败")
						})
					},
					autoFresh() {
						let _this = this;
						let url = _this.url + '/backend-api/app/model/line/get';
						let token = this.getParamValue('token')
						// let header1 = getHeaderJson(token)
						let header2 = {
							"Content-Type": 'application/x-www-form-urlencoded'
						}
						axios({
							headers: header2,
							method: 'get',
							url: url,
							params: {
								lineId: _this.lineId,
								typeId: _this.typeId
							}
						}).then(function(response) {
							if (response.data.code === 1000) {
								_this.dataJson = response.data.data;
								let arr = []
								_this.dataJson.forEach(item => {
									if (item.button == 1) {
										arr.push(item)
									}
								})
								_this.setView();
								_this.showDataJson = arr;
								for (var i = 0; i < overall.length; i++) {
									var obj = overall[i];
									obj.data = _this.dataJson[i];
								}
								clearInterval(times);
								// _this.dynamic(0);
							}
						}).catch(function(error) {
							// plus.nativeUI.toast("加载模型失败")
						})
					},
					setColor(color) {
						return Number('0x' + color)
					},
					setView() {
						objArr = [];
						// removeScene();
						this.dataJson.forEach((item, i) => {
							item.stlFile = this.imgUrl + item.stlFile;
							item.showColor = false;
							item.color = this.setColor(item.color);
							item.selectedColor = this.setColor('1FF2FF');
							// loaderFile(item, i, this.dataJson.length).then((data) => {
							// 	this.percentage = data.sum;
							// 	if (data.type) {
							// 		this.showLeft = true;
							// 	}
							// })
							if (overall.length > 0) {
								if (item.button == 1) {
									overall[i].material.color.set(item.color);
									let obj = overall[i];
									if (item.alarmLevel > 0) {
										obj.isFlash = true;
										obj.color = item.color;
										obj.selectedColor = this.setColor('1FF2FF');
										objArr.push(obj);
									}
									outlineObj(objArr);
								}
								if (i == this.dataJson.length - 1) {
									this.getGuogangStatus();
								}
							} else {
								loaderFile(item, i, this.dataJson.length).then((data) => {
									this.percentage = data.sum;
									if (data.type) {
										this.showLeft = true;
									}
								})
							}
						})
					},
					dynamic(e) {
						if (this.showDataJson.length <= 1) {
							clearInterval(times)
							return
						}
						let _this = this;
						let a = e;
						times = setInterval(function() {
							_this.setHighlight(a, 1, _this.showDataJson[a].unitId)
							if (a < _this.showDataJson.length - 1) {
								a++
							} else {
								a = 0;
							}
							// scrollto(a)
						}, 2000)

						// times()
					},
					getDataOrder(ordernos, appid) {
						let _this = this;
						let url = _this.url + '/backend-api/app/model/line/get';
						let token = this.getParamValue('token')
						// let header1 = getHeaderJson(token)
						let header2 = {
							"Content-Type": 'application/x-www-form-urlencoded'
						}
						axios({
							headers: header2,
							method: 'get',
							url: url,
							params: {
								lineId: _this.lineId,
								typeId: _this.typeId
							}
						}).then(function(response) {
							if (response.data.code === 1000) {
								_this.dataJson = response.data.data;
								let arr = []
								_this.dataJson.forEach(item => {
									if (item.button == 1) {
										arr.push(item)
									}
								})
								_this.showDataJson = arr;
								_this.setView()
							}
						}).catch(function(error) {
							// plus.nativeUI.toast("加载模型失败")
						})
					},
					//获取吐丝机电机转速状态判断过钢
					getGuogangStatus() {
						let _this = this;
						let url = _this.url + '/backend-api/web/screen/getTsjHaltStat';
						let token = this.getParamValue('token')
						let header1 = getHeaderJson(token)
						let header2 = {
							"Content-Type": 'application/x-www-form-urlencoded'
						}
						axios({
							headers: Object.assign(header1, header2),
							method: 'get',
							url: url,
						}).then(function(response) {
							if (response.data.code === 1000) {
								if (response.data.data.halt == 0) {
									_this.guogangAni = true;
									beforeStartTusiAnimate();
									tusiAnimate();
								} else {
									_this.guogangAni = false;
									stopTusiAnimate();
									stopGuogangAni();
								}
							}
						}).catch(function(error) {
							// plus.nativeUI.toast("加载模型失败")
							stopTusiAnimate();
						})
					},
					//分解url获得数据部分
					getUrlParams() {
						var search = window.location.search;
						// 写入数据字典
						var tmparray = search.substr(1, search.length).split("&");
						var paramsArray = new Array;
						if (tmparray != null) {
							for (var i = 0; i < tmparray.length; i++) {
								var reg = /[=|^==]/; // 用=进行拆分，但不包括==
								var set1 = tmparray[i].replace(reg, '&');
								var tmpStr2 = set1.split('&');
								var array = new Array;
								array[tmpStr2[0]] = tmpStr2[1];
								paramsArray.push(array);
							}
						}
						// 将参数数组进行返回
						return paramsArray;
					},

					// 根据参数名称获取参数值
					getParamValue(name) {
						var paramsArray = this.getUrlParams();
						if (paramsArray != null) {
							for (var i = 0; i < paramsArray.length; i++) {
								for (var j in paramsArray[i]) {
									if (j == name) {
										return paramsArray[i][j];
									}
								}
							}
						}
						return null;
					},
					setHighlight(i, y, unitId) {
						let _this = this;
						if (y == 0) {
							clearInterval(times)
							//拦截一下10秒钟内多次点击触发的定时器，10秒内只触发一次
							if (!this.clickTimetype) {
								this.clickTimetype = true;
								setTimeout(() => {
									_this.clickTimetype = false;
									_this.dynamic(i)
								}, 10000)
							}

						}
						this.desc = this.showDataJson[i].alarmDesc;
						this.unitId = unitId;
						let Acolor = daColor;
						let indexn
						this.dataJson.forEach((item, n) => {
							if (item.unitId == this.showDataJson[i].unitId) {
								indexn = n
							}
						})
						if (this.clickIndex == i) {
							this.showDataJson[i].showColor = false;
							overall[indexn].material.color.set(Acolor);
							this.clickIndex = null
							app.$forceUpdate();
							return
						}
						this.clickIndex = i;
						this.showDataJson.forEach((item, b) => {
							if (i == b) {
								item.showColor = true;
							} else {
								item.showColor = false;
							}
						})
						app.$forceUpdate();
						if (previous == i) {
							overall[previous].material.color.set(Acolor);
							return
						}
						daColor = overall[indexn].material.color.getHex()
						overall[indexn].material.color.set(0x2894FF);

						if (previous != null) {
							overall[previous].material.color.set(Acolor);
						}
						previous = indexn;
					}

				}
			})

			let objArr = [];
			init();

			function init() {
				container = document.getElementById('info')
				// document.body.appendChild(container);
				//创建场景
				scene = new THREE.Scene();
				// scene.background = new THREE.Color(0x092248);
				// scene.fog = new THREE.Fog(0x092248, 2, 15);


				// var plane = new THREE.Mesh(
				// 	new THREE.PlaneBufferGeometry(40, 40),
				// 	new THREE.MeshPhongMaterial({
				// 		color: 0x999999,
				// 		specular: 0x101010
				// 	})
				// );
				// plane.rotation.x = 0;
				// plane.position.y = 0;
				// scene.add(plane);

				// plane.receiveShadow = true;


				// 灯光
				var light = new THREE.DirectionalLight(0xffffff);
				light.position.set(1, 1, 1);
				scene.add(light);

				var light = new THREE.DirectionalLight(0x002288);
				light.position.set(-1, -1, -1);
				scene.add(light);

				var light = new THREE.AmbientLight(0x222222);
				scene.add(light);


				//创建渲染器
				renderer = new THREE.WebGLRenderer({
					antialias: true,
					logarithmicDepthBuffer: true,
					alpha: true
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(width, height);

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				renderer.shadowMap.enabled = true;

				container.appendChild(renderer.domElement);

				//相机   透视投影照相机 /* 四个参数分别表示：多少度视角，相机的宽高比，最近距离，最远可视距离*/
				camera = new THREE.PerspectiveCamera(15, width / height, 0.005, 1500);

				camera.position.set(0, 0, 5);

				cameraTarget = new THREE.Vector3(0, 0, 0);
				// stats
				// stats.domElement.style.left = '50px';
				// container.appendChild(stats.dom);

				initObject(0, 0, 0);
				//加入事件监听器,窗口自适应
				window.addEventListener('resize', onWindowResize, false);
				window.addEventListener('mousedown', onMouseClick, false);
				window.addEventListener('dblclick', onDblclick, false);

				renderer.domElement.addEventListener('mousemove', onMouseMove);
			}

			function loaderFile(item, i, length) {
				return new Promise((resolve, reject) => {
					loader.load(item.stlFile, function(geometry) {
						let visiable = true;
						if (item.name == "钢丝圈-1") {
							visiable = false;
							tusiArrIndex.push(i);
						} else if (item.name == "钢丝圈-2") {
							visiable = false;
							tusiArrIndex.push(i);
						}
						var material = new THREE.MeshPhongMaterial({
							color: item.color,
							transparent: item.transparent == 1 ? true : false,
							opacity: item.opacity, // 定义物体的透明度。与 transparent 属性一起使用。该属性的赋值范围从 0 到 1。
							visible: visiable, //定义该材质是否可见。如果设置为 false,那么在场景中就看不到该物体。
							depthTest: true, //遮挡
							// side: THREE.DoubleSide,
							// depthWrite: false
						});
						overall[i] = new THREE.Mesh(geometry, material);
						overall[i].position.set(item.pointX, item.pointY, item.pointZ);
						overall[i].rotation.set(item.rotaX, item.rotaY, item.rotaZ);
						overall[i].scale.set(item.scaleX, item.scaleY, item.scaleZ);
						overall[i].rotateStatus = item.rotateStatus;
						overall[i].rotateSpeed = item.rotateSpeed;
						overall[i].rotateShaft = item.rotateShaft;
						overall[i].data = item;
						let obj = overall[i];
						if (item.button == 1) {
							if (item.alarmLevel > 0) {
								obj.isFlash = true;
								obj.color = item.color;
								obj.selectedColor = item.selectedColor;
								objArr.push(obj);
							}
							clickArr.push(obj);
						}
						scene.add(overall[i]);
						cnt += 1; //加载成功数+1
						let sum = Math.round((cnt / length) * 100) + '%'

						if (cnt >= length) { //全部加载完
							requestAnimationFrame(render);
							outlineObj(objArr);
							app.getGuogangStatus();
							resolve({
								type: true,
								sum: sum
							});
							reject(false);
						} else {
							resolve({
								sum: sum
							});
						}
					});
				})

			}

			function addShadowedLight(x, y, z, color, intensity) {

				var directionalLight = new THREE.DirectionalLight(color, intensity);
				directionalLight.position.set(x, y, z);
				scene.add(directionalLight);

				directionalLight.castShadow = true;

				var d = 1;
				directionalLight.shadow.camera.left = -d;
				directionalLight.shadow.camera.right = d;
				directionalLight.shadow.camera.top = d;
				directionalLight.shadow.camera.bottom = -d;

				directionalLight.shadow.camera.near = 1;
				directionalLight.shadow.camera.far = 4;

				directionalLight.shadow.mapSize.width = 1024;
				directionalLight.shadow.mapSize.height = 1024;

				directionalLight.shadow.bias = -0.002;

			}
			//可视窗口重置
			function onWindowResize() {
				var width = window.innerWidth;
				var height = window.innerHeight;
				//加入事件监听器,窗口自适应
				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize(width, height);

			}

			//删除3d模型
			function removeScene() {
				clearScene();
			};

			function clearCache(item) {
				item.geometry.dispose();
				item.material.dispose();
			};

			function clearScene() {
				removeObj(scene);
			};

			function removeObj(obj) {
				let arr = obj.children.filter(x => x);
				arr.forEach(item => {
					if (item.children.length) {
						this.removeObj(item);
					} else {
						this.clearCache(item);
						item.clear();
					}
				});
				obj.clear();
				arr = null;
			};

			//绘画渲染
			function render() {

				// stats.update(); //更新当前统计
				renderer.render(scene, camera);
				requestAnimationFrame(animation); //请求再次执行渲染函数animation
				if (composer) {
					composer.render()
				}
			}
			//动画库
			function animation() {
				overall.forEach((item) => {
					if (item.rotateStatus == 1) {
						switch (item.rotateShaft) {
							case 'X':
								item.rotateX(item.rotateSpeed)
								break
							case 'Y':
								item.rotateY(item.rotateSpeed)
								break
							case 'Z':
								item.rotateZ(item.rotateSpeed)
								break
						}
					}
				})

				// camera.position.set(0, -2, 3);
				if (guogangParam.steel_status == 1 && guogangParam.steel_show && app.guogangAni) {
					repeatlineW1()
				}
				render()
			}
			let currentObj = null;
			//点击事件
			function onMouseClick(event) {
				if (event.button == 0) {
					mouse.x = (event.clientX / window.innerWidth) * 2 - 1
					mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
					// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
					raycaster.setFromCamera(mouse, camera);
					// 获取raycaster直线和所有模型相交的数组集合
					var intersects = raycaster.intersectObjects(clickArr);
					//将所有的相交的模型的颜色设置为红色
					let obj = {};
					if (intersects.length == 0) {
						if (currentObj != null) {
							objArr.splice(-1, 1);
						}
						outlineObj(objArr);
						window.parent.postMessage({
							data: {
								type: 5
							}
						});
						return
					}
					for (var i = 0; i < intersects.length; i++) {
						if (i == intersects.length - 1) {
							obj = intersects[i].object;
							if (currentObj != null) {
								objArr.splice(-1, 1);
							}
							currentObj = obj;
							currentObj.selectedColor = '1FF2FF';
							objArr.push(currentObj);
							outlineObj(objArr);
							window.parent.postMessage({
								data: {
									mouse: {
										x: event.clientX,
										y: event.clientY
									},
									data: obj.data,
									type: 4
								}
							});
							return;
						}
					}
				}
			}

			function onDblclick(event) {
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
				// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
				raycaster.setFromCamera(mouse, camera);
				// 获取raycaster直线和所有模型相交的数组集合
				var intersects = raycaster.intersectObjects(clickArr);
				//将所有的相交的模型的颜色设置为红色
				let obj = {};
				for (var i = 0; i < intersects.length; i++) {
					if (i == intersects.length - 1) {
						obj = intersects[i].object;
						if (obj.data.unitShow == 1) {
							window.parent.postMessage({
								data: {
									mouse: {
										x: event.clientX,
										y: event.clientY
									},
									data: obj.data,
									type: 6
								}
							});
						}
						return;
					}
				}
			}
			//悬浮事件
			function onMouseMove(event) {
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
				// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
				raycaster.setFromCamera(mouse, camera);
				// 获取raycaster直线和所有模型相交的数组集合
				var intersects = raycaster.intersectObjects(clickArr);
				//将所有的相交的模型的颜色设置为红色
				for (var i = 0; i < overall.length; i++) {
					var obj = overall[i];
					if (obj.data) {
						if (obj.data.button == 1 && obj.data.halt == 0) {
							if (obj.data.alarmLevel == 0) {
								obj.material.color.set("#1DB712");
							} else if (obj.data.alarmLevel == 1) {
								obj.material.color.set("#A8870A");
							} else if (obj.data.alarmLevel == 2) {
								obj.material.color.set("#A83B0A");
							} else if (obj.data.alarmLevel == 3) {
								obj.material.color.set("#A80A12");
							}
						}
					}
				}
				for (var i = 0; i < intersects.length; i++) {
					var obj = intersects[i].object;
					if (i == intersects.length - 1) {
						if (obj.data.halt == 0) {
							if (obj.data.alarmLevel == 0) {
								obj.material.color.set("#007900");
							} else if (obj.data.alarmLevel == 1) {
								obj.material.color.set("#938f20");
							} else if (obj.data.alarmLevel == 2) {
								obj.material.color.set("#9a481f");
							} else if (obj.data.alarmLevel == 3) {
								obj.material.color.set("#910002");
							}
						}
						window.parent.postMessage({
							data: {
								mouse: {
									x: event.clientX,
									y: event.clientY
								},
								data: obj.data,
								type: 7
							}
						});
						return;
					}
				}

				window.parent.postMessage({
					data: {
						type: 8
					}
				});

			}
			//高亮显示模型（呼吸灯）
			function outlineObj(selectedObjects) {
				// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。

				composer = new THREE.EffectComposer(renderer)
				// 新建一个场景通道  为了覆盖到原理来的场景上
				var renderPass = new THREE.RenderPass(scene, camera)
				composer.addPass(renderPass);
				for (let i in selectedObjects) {
					let item = selectedObjects[i];
					// 物体边缘发光通道
					let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene,
						camera,
						item)
					outlinePass.selectedObjects = [item]
					outlinePass.edgeStrength = 2.0 // 边框的亮度
					outlinePass.edgeGlow = 1 // 光晕[0,1]
					outlinePass.usePatternTexture = false // 是否使用父级的材质
					outlinePass.edgeThickness = 2.0 // 边框宽度
					outlinePass.downSampleRatio = 2 // 边框弯曲度
					outlinePass.clear = true
					//警告的闪烁
					if (item.isFlash) {
						outlinePass.pulsePeriod = 0.5 // 呼吸闪烁的速度,0为不闪烁，单位s
						outlinePass.visibleEdgeColor.set(item.color) // 呼吸显示的颜色，这里取当前模型颜色即可
						outlinePass.hiddenEdgeColor.set(item.color) // 呼吸消失的颜色，这里取当前模型颜色即可
						//鼠标悬浮
					} else {
						outlinePass.pulsePeriod = 0 // 呼吸闪烁的速度,0为不闪烁，单位s
						outlinePass.visibleEdgeColor.set(item.selectedColor) // 呼吸显示的颜色，这里取当前模型颜色即可
						outlinePass.hiddenEdgeColor.set(item.selectedColor) // 呼吸消失的颜色，这里取当前模型颜色即可
					}
					composer.addPass(outlinePass)
				}
				// 自定义的着色器通道 作为参数
				var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader)
				effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
				effectFXAA.renderToScreen = true
				composer.addPass(effectFXAA)
			}

			function tusiAnimate() {
				clearInterval(tusiAnimInterval);
				tusiAnimInterval = setInterval(() => {
					overall[tusiArrIndex[0]].material.visible = !overall[tusiArrIndex[0]].material.visible;
					overall[tusiArrIndex[1]].material.visible = !overall[tusiArrIndex[1]].material.visible;
				}, 1000);
			}

			function beforeStartTusiAnimate() {
				overall[tusiArrIndex[0]].material.visible = true;
				overall[tusiArrIndex[1]].material.visible = false;
			}

			function stopTusiAnimate() {
				clearInterval(tusiAnimInterval);
				overall[tusiArrIndex[0]].material.visible = false;
				overall[tusiArrIndex[1]].material.visible = false;
			}
			/**
			 * @description 初始化添加物体,画一条线
			 */
			function initObject(start, end, type) {
				let color
				if (type == 0) {
					color = 0xff0000;
				} else {
					color = 0xc0c0c0;
				}
				let material = new THREE.LineBasicMaterial({
					color: color
				});
				// material.resolution.set(window.innerWidth, window.innerHeight);
				let geometry = new THREE.Geometry();
				geometry.vertices.push(
					new THREE.Vector3(start, 0.005, 0.02), new THREE.Vector3(end, 0.005, 0.02)
				);
				line = new THREE.Line(geometry, material);
				// line.position.x = -6.5145408
				line.position.x = guogangParam.start_point
				scene.add(line)
				AllLineArr.push(line)
			}
			let lineW1Part = 1;
			let lineW2Part = 0;
			let isStartLineW1 = false;
			let isStartLineW2 = false;
			let waitTimeout = null;
			//循环显示过钢
			function repeatlineW1() {
				let maxLength = guogangParam.end_point - guogangParam.start_point;
				let step = 0.05;
				if (guogangParam.start_point > guogangParam.end_point) {
					step = -0.05;
				}
				let emptyLength = 1;
				let waitTime = 5000;
				//刚开始，红线起点不动，延长长度直到最大值
				if (lineW1Part == 1) {
					if (Math.abs(lineW1) < Math.abs(maxLength)) {
						lineW1 += step
						lineW1 = Math.round(lineW1 * 100) / 100;
						if (AllLineArr.length > 0) {
							scene.remove(AllLineArr[0]);
							AllLineArr.splice(0, 1);
						}
						initObject(0, lineW1, 0);
					} else {
						//暂停
						if (waitTimeout == null) {
							waitTimeout = setTimeout(() => {
								waitTimeout = null;
							}, waitTime);
						}
						lineW1Part = 2;
					}
					//长度达到最大值，开始改变起点，终点不动
				} else if (waitTimeout == null && lineW1Part == 2) {
					if (Math.abs(lineW1) > 0) {
						lineW1 -= step;
						lineW1 = Math.round(lineW1 * 100) / 100;
						if (AllLineArr.length > 0) {
							scene.remove(AllLineArr[0]);
							AllLineArr.splice(0, 1);
						}
						initObject(maxLength - lineW1, maxLength, 0);
					} else {
						lineW1Part = 0;
					}
					if (Math.abs(maxLength) - Math.abs(lineW1) > emptyLength) {
						lineW2Part = 1;
					}
				}
				if (lineW2Part == 1) {
					if (Math.abs(lineW2) < Math.abs(maxLength)) {
						lineW2 += step
						lineW2 = Math.round(lineW2 * 100) / 100;
						if (AllLineArr.length > 1) {
							scene.remove(AllLineArr[0]);
							AllLineArr.splice(0, 1);
						}
						initObject(0, lineW2, 0);
					} else {
						if (waitTimeout == null) {
							waitTimeout = setTimeout(() => {
								waitTimeout = null;
							}, waitTime);
						}
						lineW2Part = 2;
					}
				} else if (waitTimeout == null && lineW2Part == 2) {
					if (Math.abs(lineW2) > 0) {
						lineW2 -= step;
						lineW2 = Math.round(lineW2 * 100) / 100;
						if (AllLineArr.length > 1) {
							scene.remove(AllLineArr[0]);
							AllLineArr.splice(0, 1);
						}
						initObject(maxLength - lineW2, maxLength, 0);
					} else {
						lineW2Part = 0;
					}
					if (Math.abs(maxLength) - Math.abs(lineW2) > emptyLength) {
						lineW1Part = 1;
					}

				}
			}

			function stopGuogangAni() {
				if (AllLineArr.length > 1) {
					scene.remove(AllLineArr[0]);
					scene.remove(AllLineArr[1]);
					AllLineArr.splice(0, 1);
				} else {
					scene.remove(AllLineArr[0]);
				}
				AllLineArr = [];
			}
			//轨道控制 镜头的移动
			var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
			controls.enableRotate = false;


			// function scrollto(e) {
			// 	// 获取父盒子（肯定有滚动条）
			// 	var parent = document.getElementById('parent');
			// 	parent.scrollTop = document.getElementById('child' + e).offsetTop - document.getElementById('child' + e)
			// 		.offsetHeight
			// }
		</script>
	</body>
</html>
